<template>
    <div class="mine">
        <div class="top">
            <image :src="person.avatar"></image>
            <view class="name">{{person.nickname}}</view>
        </div>
		<view class="middle">
			<view class="row">
				<text class="title">D id</text>
				<text class="content">{{person.loginId}}</text>
			</view>
			<view class="row">
				<text class="title">性别</text>
				<text class="content">{{person.gender==''?'未知':person.gender}}</text>
			</view>
			<view class="row">
				<text class="title">个性签名</text>
				<text class="content">{{person.signature!=''?person.signature:'这个人很懒,什么也没有留下...'}}</text>
			</view>
		</view>
        <div class="bottom">
			<button class="btn" :disabled="agree" @tap="agreeApply()">{{type=='person-apply'?'同意好友申请':'同意入群申请'}}</button>
        </div>
    </div>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import util from 'util/date';
	import $store from '@/store/index.js';
	import dateUtil from 'util/date';
	import {mapActions,mapGetters} from 'vuex';
    export default {
        data () {
            return {
				index: 0,
				person:{},
				agree:false,
				type:''
            }
        },
		onLoad (options) {
			this.index = options.index;
			this.person = this.$store.state.applyList[this.index].from;
			this.type = this.$store.state.applyList[this.index].type;
		},
		computed:{
			...mapGetters(['friends']),
		},
        methods : {
			...mapActions(['addFriend','deleteApply']),
			//好友申请
            async agreeApply(){
				this.agree = true;
				if(this.type=='person-apply'){
					//构造消息
					let message={
						type:'apply-person-agree',
						to:this.person.id,
						from:this.$store.getters.user,
						time:dateUtil.getTimeNow()
					}
					//将好友信息保存到本地
					for(let i = 0;i<this.friends.length;i++){
						if(this.friends[i].id==this.person.id){
							uni.showToast({
								title:'TA已经是您的好友了',
								icon:'none',
								duration:1000
							})
							//删除申请记录
							this.deleteApply(this.index);
							return
						}
					}
					
					this.addFriend(this.person);
					WebSocket.sendMessage(message);
					uni.showToast({
						title:'已将好友添加到你的好友列表',
						icon:'success',
						duration:1500
					})
					//删除申请记录
					this.deleteApply(this.index);
					//初始化会话
					let session = {
						id:this.person.id,
						avatar:this.person.avatar,
						nickname:this.person.nickname,
						time:dateUtil.getTimeNow()
					}
					$store.dispatch('createNewChatRoom',session);
					let index =await $store.dispatch('getRoomIndex',this.person.id);//获取房间号
					let msg = {
						index:index,
						content:'我已经同意你的申请了,快和我聊天吧',
						type:'text',
						time:dateUtil.getTimeNow()
					}
					$store.dispatch('sendMessageOut',msg);
				}
				else{
					//构造消息
					let message={
						type:'apply-group-agree',
						to:this.person.id,
						from:this.$store.getters.user,
						time:dateUtil.getTimeNow(),
						group:this.$store.state.applyList[this.index].group
					}
					WebSocket.sendMessage(message);
					this.deleteApply(this.index);
				}
			}
        }
    }
</script>

<style>
	.row{
		display: flex;
	}
	.middle{
		padding: 20rpx;
	}
	.title{
		font-weight: 600;
		border-radius: 10rpx;
		padding: 5rpx;
		background-color: #c2b5be;
		margin: 10rpx;
	}
	.content{
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 20rpx;
		word-break:break-all;
	}
    .mine{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top{
        height: 400rpx;
        background: #C8C7CC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top image{
        width:156rpx;
        height: 156rpx;
        border-radius: 156rpx;
    }
    .top .name{
		font-weight: 1000;
		font-size: larger;
        line-height: 80rpx;
    }
    .bottom{
		padding-top: 100rpx;
        text-align: center;
        line-height: 200rpx;
    }
	.logout{
		width: 266rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background-color: #618DFF;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.btn{
		background-color: #4CD964;
		color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}
</style>
